<template>
	<view class="container">
		<!-- 取消约餐 -->
		<uni-popup ref="pop3" class="uni-propun-con" :safeArea="false" zindex>
			<view class="popup-content  padding-lr">
				<view class="uni-dialogCon">
					<view class="belivery-title padding-top text-bold text-c0 text-xl  text-center">取消约餐</view>
					<view class="">
						<view class="mainbox">
							<view class="martB">确定取消本次约餐么？</view>
							<view class="flex align-center justify-between flex-wrap">
								<view class="flex align-center listyuecan " v-for="(item,index) in cancelData"
									:key="index" @click="tabRadioSel(item)">
									<text class="csico text-xxl margin-right-xxs"
										:class="item.state?'.cuIcon-roundcheckfill':'cuIcon-round'"></text>
									<text class="textprop">{{item.text}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="popupEmil-btn  flex justify-between align-center">
						<view class="mdbtn text-acenter text-ngreen" @click="hidePop('pop3')">我点错了</view>
						<view class="mdbtn text-acenter" @click="cancel">我要取消</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 约餐弹窗 -->
		<setAutoMeal ref="pop1" @confirm="sureAuto"></setAutoMeal>
		<!-- 定制弹窗-规格选择@change="changeModalNum" -->
		<speciModal ref="pop2" @confirm="confirmModalNum" :actionfn="cacheListGroups" @delItem="modalDel"></speciModal>
		<view class="topSec p_rlt padding-lr text-white padding-bottom-xl">
			<view class="text-bold tc_name padding-top-lg">
				{{mealDetail.name||''}}
			</view>
			<view class="padding-top-sm text-sm">
				{{mealDetail.vintroduction||''}}
			</view>
			<view v-if="mealDetail.vtwo_type=='814'" class="flex align-center padding-top-sm" @click="tapShopItem">
				详情<text class="cuIcon-right text-sm margin-left-xxs"></text>
			</view>
		</view>
		<!-- 原 -->
		<!-- <swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
			interval="5000" duration="500">
			<swiper-item v-for="(item,index) in mealDetail.detailImgList" :key="index">
				<image :src="imgBaseUrl + item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="ms_test padding-left padding-top padding-bottom-sm p_rlt">
			<view class=" flex align-center">
				<view class="flex-sub">
					{{mealDetail.name||''}}
				</view>
				<view class="padding-tb-xs padding-lr-lg point" @click="tapShopItem">
					详情<text class="cuIcon-right text-sm margin-left-xxs"></text>
				</view>
			</view>
			<view class="padding-tb-xs padding-right" style="padding-bottom: 30rpx;">
				{{mealDetail.vintroduction||''}}
				21天餐再次新升级!种类更丰富，只为给你更好的轻负控卡生活!每天少跑7公里！
			</view>
		</view> -->
		<!-- 自动约餐 -->
		<view v-if="hasRecord" class="p_rlt recBox">
			<view class="automatic_con">
				<view class="flex justify-between align-center leMeal_title paddingdzih">
					<view class="textgd" @click="tapToggleCal">我的约餐<text class="fcon-Vector mores_icons  rotateStyle"
							:class="{rotateStyleHover : showCad}"></text> </view>
					<view>
						<text class="mores" @click="showPop('pop1')">设置自动约餐<text
								class="fcon-Vector mores_icons"></text></text>
					</view>
				</view>
				<view class="weekend flex justify-between align-center paddingxxx" v-if="!showCad"
					:class="{rotateStyleHover : showCad}">
					<view class="listUl flex justify-center align-center flex-direction" v-for="(item,index) in weekend"
						:key="index">
						<view class="borderLi flex justify-center align-center" :class="getClassNew(item.statue)">
							<text v-if="item.statue == 0" class="cuIcon-check text-xl "></text>
							<text v-if="item.statue == 1">已约</text>
							<text v-if="item.statue == 2">{{item.text}}</text>
						</view>
						<text class="timeweek">{{item.time}}</text>
					</view>
				</view>
				<!-- 日历 -->
				<view>
					<view class="mcalendbx" :class="{show:showCad,lg:filcalen}">
						<view class="mcdbox p_rlt">
							<view v-if="curMonth" class="mothbox text-sm text-c9">
								<view class="border_bootom flex justify-between align-center">
									<text class="curMonth_style"> {{curMonth}}月</text>
									<view>
										<text class="yuan"></text>
										<text>已用餐：30次</text>
									</view>
									<view>
										<text class="yuan"></text>
										<text>卡路里：3356Kcal</text>
									</view>
									<view>
										<text class="yuan"></text>
										<text>消费：￥635.00</text>
									</view>
								</view>
							</view>
							<!-- state.tapcaly -->
							<view class="calenSubFixed text-white" :class="{show:showCalSub}"
								:style="{top:state.tapcaly+'px'}">
								<view class="csfmain p_rlt">
									<text class="jtbox" :style="{left:state.tapcalx+'px'}"></text>
									<view class="flex align-center text-lg padding-tb-xs">
										<view class="flex-sub text-bold">
											早餐 (<text><text class="text-bold text-lg">308</text><text
													style="font-weight: normal;">Kcal</text></text>)
										</view>
										<view class="padding-right sizipic">
											<text class="ionc_pic">￥</text>15.00
										</view>
									</view>
									<view class="clm_cont">
										<view class="flex align-center cpdmin">
											<view class="flex-sub">
												鸡蛋一个
											</view>
											<view class="">
												139kcal
											</view>
										</view>
										<view class="flex align-center cpdmin">
											<view class="flex-sub">
												甜玉米1根
											</view>
											<view class="">
												103kcal
											</view>
										</view>
										<view class="flex align-center cpdmin">
											<view class="flex-sub">
												纯牛奶一杯
											</view>
											<view class="">
												66kcal
											</view>
										</view>
									</view>

									<view class="flex align-center text-lg padding-tb-xs">

										<view class="flex-sub text-bold">
											中餐 (<text><text class="text-bold text-lg">308</text><text
													style="font-weight: normal;">Kcal</text></text>)
										</view>
										<view class="padding-right sizipic">
											<text class="ionc_pic">￥</text>35.00
										</view>

									</view>
									<view class="clm_cont">
										<view class="flex align-center cpdmin">
											<view class="flex-sub">
												橄榄油老姜云耳炒鸡100g
											</view>
											<view class="">
												207kcal
											</view>
										</view>
										<view class="flex align-center cpdmin">
											<view class="flex-sub">
												橄榄油水芹炒百合100g
											</view>
											<view class="">
												131kcal
											</view>
										</view>
										<view class="flex align-center cpdmin">
											<view class="flex-sub">
												橄榄油自灼生菜100g
											</view>
											<view class="">
												37kcal
											</view>
										</view>
									</view>

									<view class="flex align-center text-lg padding-tb-xs">

										<view class="flex-sub text-bold">
											晚餐 (<text><text class="text-bold text-lg">359</text><text
													style="font-weight: normal;">Kcal</text></text>)
										</view>
										<view class="padding-right sizipic">
											<text class="ionc_pic">￥</text>28.00
										</view>
									</view>
									<view class="clm_cont">
										<view class="flex align-center cpdmin">
											<view class="flex-sub">
												五红粥300g
											</view>
											<view class="">
												208kcal
											</view>
										</view>
										<view class="flex align-center cpdmin">
											<view class="flex-sub">
												橄榄油热拌鸡蛋干100g
											</view>
											<view class="">
												151kcal
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- <view v-for="index in 5" :key="index" class="mcitm"></view> -->
							<view v-for="(item,index) in state.calenList" :key="index" class="mcitm text-center"
								@click="tapCalItem(item,$event)">
								<block v-if="item.num">

									<view class="mcsub text-sm d_ib"
										:class="{ngreen:item.actnum!=3&&item.state == 2,grey:item.action&&item.actnum==3}">
										<!-- //吃过了 0  1 预约了  2待预约 -->
										<!-- <tetx v-if="item.state == 0 && item.actnum!=3">{{item.actnum}}</tetx>
                    <tetx v-if="item.actnum ==3" class="cuIcon-check text-xl"></tetx>
                    <tetx v-if="item.state == 1">约</tetx>
                    <text v-if="item.state == 2">{{item.name}}</text> -->
										<text v-if="item.action&&item.actnum==3" class="cuIcon-check text-xl"></text>
										<text v-else-if="item.action&&item.actnum!=3" class="">{{item.actnum}}</text>
										<tetx v-else-if="item.actnum!=3&&item.state == 2">约</tetx>
										<text v-else>{{item.name}}</text>
										<!-- <text>{{item.state}}</text> -->
									</view>
									<view class="mcnum text-xs">
										{{item.num}}
									</view>
								</block>
								<view v-else class="mcitm"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-between align-center leMeal_title bg_container">
					<image v-if="!showCad" class="posiImg" src="../../../static/yuding.png" mode=""></image>
					<view class="textgd">今日菜单推荐</view>
					<view class="flex align-center" @click="selecTab(indexFlag==0?1:0)">
						<text class="text-c9 margin-right-xxs "
							:class="indexFlag==0?'fcon-liebiao':'fcon-shuanglieliebiao'"></text>
						<text class="">{{indexFlag==0?'菜名点菜':'看图点菜'}}</text>
					</view>
					<!-- <view class="swtich_menu flex justify-between align-center">
						<text class="font_style flex align-center justify-center" v-for="(item,index) in mealTitle"
							:key="index" @click="selecTab(index)"
							:class="{active : indexFlag == index}">{{item.text}}</text>
					</view> -->
				</view>
			</view>
		</view>
		<!-- <view  v-if="!hasRecord" class="flex justify-between align-center leMeal_title bg_container">
			<image v-if="!showCad" class="posiImg" src="../../../static/yuding.png" mode=""></image>
			<view class="textgd">今日菜单推荐</view>
			<view class="flex align-center" @click="selecTab(indexFlag==0?1:0)">
				<text class="text-c9 margin-right-xxs "
					:class="indexFlag==0?'fcon-liebiao':'fcon-shuanglieliebiao'"></text>
				<text class="">{{indexFlag==0?'菜名点菜':'看图点菜'}}</text>
			</view>
		</view> -->


		<view class="cenSec">
			<!-- :style="ind === 0 ? computedStyle : ''" -->
			<view class="singleMeal_box" :class="{'singleMeal_box_bg':indexFlag==1}">
        <view class="leMeal_title leMeal_titlenew flex justify-between align-center">
        	<view class="textgdnew">今日推荐</view>
        	<view class="flex align-center"
        		@click="selecTab(indexFlag==0?1:0)">
        		<text class="text-c9 margin-right-xxs "
        			:class="indexFlag==0?'fcon-liebiao':'fcon-shuanglieliebiao'"></text>
        		<text class="">{{indexFlag==0?'菜名点菜':'看图点菜'}}</text>
        	</view>
        </view>
				<block v-for="(it,ind) in sxpGroupList" :key="ind">
					<!-- 图片版 -->
          
					<block v-if="indexFlag==0">
						<view class="leMeal_title flex justify-between align-center">
							<view class="textgd">{{it.vname||''}}
							</view>
							<!-- <view class="swtich_menu flex justify-between align-center" v-if="ind === 0 && !hasRecord">
								<text class="font_style flex align-center justify-center" v-for="(item,index) in mealTitle"
									:key="index" @click="selecTab(index)"
									:class="{active : indexFlag == index}">{{item.text}}</text>
							</view> -->
							<!-- <view v-if="ind === 0 && !hasRecord" class="flex align-center"
								@click="selecTab(indexFlag==0?1:0)">
								<text class="text-c9 margin-right-xxs "
									:class="indexFlag==0?'fcon-liebiao':'fcon-shuanglieliebiao'"></text>
								<text class="">{{indexFlag==0?'菜名点菜':'看图点菜'}}</text>
							</view> -->
							<block>
								<view v-if="it.is_add_goods=='5'">
									<text class="mores" @click="getMores(it)">更多<text
											class="fcon-Vector mores_icons"></text></text>
								</view>
							</block>

						</view>
						<view class="list_img bg flex justify-start flex-wrap">
							<!-- d_ib -->
							<view class="flex flex-direction mitem padding-top-sm" v-for="(item,index) in it.specList"
								:key="index">
								<view class="flex-sub">
									<view class="img_style text-center" @click="handelPre(it.specList,index,item)">
										<!-- <image class="img_wh" :src="item.img" mode=""></image> specList tabList  :fade="false" :lazyLoad="false" -->
										<tb-image width="180rpx" height="180rpx" borderRadius="30rpx"
											:src="imgBaseUrl + (item.vimage||item.vmaster_product_image_id||'')">
											<template v-slot:error>
												<image src="../../../static/menuEmpty.png" class="img_wh"
													mode="aspectFill">
												</image>
											</template>
										</tb-image>
										<!-- <view class="specifications" v-if="!indexFlag">
											{{item.vname||''}}
										</view>
										<view class="lock_icon_Vimg" v-if="item.isLock">
											<text class="fcon-a-Frame427321310"></text>
										</view> -->
										<view class="goods_removeds" v-if="item.sku_status!='233'">已下架</view>
									</view>
									<view class="text_name padding-top-xs text-center">{{item.goodsname||''}}</view>
									<view class="text_pic_con text-center padding-top-xs">
										<view class="text_price">
											<block
												v-if="curSingleMealType!='1175'&&(item.showPrice&&item.is_default_buy!='5'||!item.showPrice)">
												<text v-if="item.showPrice!=null"
													class="text-xs">{{item.isPosPrice?'+':'-'}}</text>
												<text :style="{ fontSize:'20rpx'}">￥</text>
												<text>{{item.showPrice!=null?item.showPrice:(shopStore.costPlan == '1130' ? item.sxp_site_sell_price : item.sxp_out_sell_price)}}</text>
												<text>/</text>
												<!-- {{item.activity ? item.activity_price : (shopStore.costPlan == '1130' ? item.sxp_site_sell_price : item.sxp_out_sell_price)}}/ -->
											</block>
											<text class="text-c9 text-sm">
												{{item.vname||''}}
											</text>
										</view>
										<!-- <view class="numBox">
											<text class="csico text-xxl" v-if="!item.isLock" @tap="tapItemSelec(item)"
											:class="item.select?'.cuIcon-roundcheckfill':'cuIcon-round'"></text>
											<view v-else class="lock_icon">
											  <text class="fcon-a-Frame427321310"></text>
											</view>
											<uni-number-box @changes="changeNum" v-model="item.num" :sku="item" :max="item.isLock?1:999"
												:disabled="item.isLock?true:false" />
										</view> -->
									</view>
								</view>
								<view class="numBox flex justify-end margin-top-xs">
									<view v-if="item.isLock" class="lkbox text-acenter">
										<view class="lock_icon_Vimg d_ib">
											<text class="fcon-a-Frame427321310"></text>
										</view>
									</view>
									<uni-number-box v-else @changes="changeNum" allowInput fontSize="36rpx"
										v-model="item.num" :step="item.num<=0?item.sminNums:1" :sku="item"
										:min="item.isMust?item.sminNums:0" :nstash="item.num>0&&item.num>=item.sminNums"
										:max="(item.smaxNums>=item.fmaxNums?item.fmaxNums:item.smaxNums)" :disabled="item.sku_status=='233'?false:true"/>
									<!-- getSmaxNum(item)最大数：需根据当前组的商品总数与组允许的最大数动态变化 -->
								</view>
							</view>

						</view>
					</block>
					<!-- 文字版 -->
					<block v-else>
						<view class="leMeal_title flex justify-between align-center">
							<view class="textgd">{{it.vname||''}}</view>
							<!-- <view class="swtich_menu flex justify-between align-center" v-if="ind == 0 && !hasRecord">
								<text class="font_style flex align-center justify-center" v-for="(item,index) in mealTitle"
									:key="index" @click="selecTab(index)"
									:class="{active : indexFlag == index}">{{item.text}}</text>
							</view> -->
							<!-- <view v-if="ind == 0 && !hasRecord" class="flex align-center"
								@click="selecTab(indexFlag==0?1:0)">
								<text class="text-c9 margin-right-xxs"
									:class="indexFlag==0?'fcon-liebiao':'fcon-shuanglieliebiao'"></text>
								<text class="">{{indexFlag==0?'菜名点菜':'看图点菜'}}</text>
							</view> -->
							<view>
								<text v-if="it.is_add_goods=='5'" class="mores" @click="getMores(it)">更多<text
										class="fcon-Vector mores_icons"></text></text>
							</view>
						</view>
						<view class="list_img flex justify-start flex-wrap">
							<view class="flex flex-direction margin-right zitem " v-for="(item,index) in it.specList"
								:key="index" :class="{act:item.num && !item.isLock,gry:getSmaxNum(item)<=0 || item.sku_status!='233'}">

								<view class="flex justify-center list_border align-center p_rlt"
									@click="selecList(item,index,it.specList)"
									:class="{ activeList: item.num && !item.isLock }">

									<view @click.stop="handelPre(it.specList,index,item)">
										<tb-image width="40rpx" height="40rpx" borderRadius="20rpx"
											:src="imgBaseUrl + (item.vimage||item.vmaster_product_image_id||'')">
											<template v-slot:error>
												<image src="../../../static/menuEmpty.png" class="text_img"
													mode="aspectFill">
												</image>
											</template>
										</tb-image>
										<!-- <image class="text_img" :src="item.img" lazy-load mode="aspectFill"></image> -->
									</view>
									<view class="flex-sub text-cut spctext">
										<text class="text_marleft">{{item.goodsname||''}}</text>
										<text :class="{text_marleft: item.sku_status!='233'}">{{item.vname||''}}</text>
									</view>
                 <view class="goods_removeds_text" v-if="item.sku_status!='233'">已下架</view>
									<!-- <view class="text_price" v-if="curSingleMealType!='1175'&&item.is_default_buy!='5'"> -->
                  <view class="text_price" v-if="curSingleMealType!='1175'">
										<text v-if="item.showPrice!=null"
											class="text-xs">{{item.isPosPrice?'+':'-'}}</text>
										<text :style="{ fontSize:'32rpx'}">￥</text>
										<text>{{item.showPrice!=null?item.showPrice:(shopStore.costPlan == '1130' ? item.sxp_site_sell_price : item.sxp_out_sell_price)}}</text>
									</view>
									<view v-if="item.isLock && !item.num" class="lock_icon lock_icon_posi">
										<text class="fcon-a-Frame427321310"></text>
									</view>
									<uni-badge class="uni-badge-left-margin total" :text="item.num" absolute="rightTop"
										:offset="[0, -23]" size="normal">
									</uni-badge>
								</view>
							</view>
						</view>
					</block>
				</block>
			</view>
		</view>



		<!-- 原 -->
		<!-- <view v-if="false" class="centSec lh_z padding-bottom p_rlt" v-for="(it,ind) in mealList" :key="ind"
			style="border: 1px solid red;">
			<view class="padding-top-xs">
				<view class="cstit text-lg flex align-center text-bold padding-top justify-between">
					<text class="margin-left-xs">{{it.tabName}}</text>
					<text class="mores" @click="getMores" v-if="ind==0">更多<text
							class="fcon-Vector mores_icons"></text></text>
				</view>
				<view class="cslist flex flex-wrap">
					<view v-for="(item,index) in it.tabList" :key="index" class="d_ib clitm margin-top-sm"
						@click="tapItemSelec(item)">
						<view class="climgbx">
							<image class="climg" :src="'https://cdn-static.yekjx.com/'+item.img" lazy-load
								mode="aspectFit"></image>
						</view>
						<view class="">
							<view class="padding-top-xs padding-lr-xs text-cuts">
								{{item.name}}
							</view>
							<view class="text-sm text-c6 margin-top-xxs padding-lr-xs text-cuts">
								{{item.dis1}}<text class="csdian text-df"></text>
							</view>
							<view class="csbtnbx flex align-center justify-between padding-lr-sm margin-top-sm">
								<view class="price_text">
									<text v-if="ind!=0">+</text><text class="price_text_y">¥</text>{{item.price}}
								</view>
								<view>
									<text class="csico text-xxl" v-if="!item.isLock"
										:class="item.select?'.cuIcon-roundcheckfill':'cuIcon-round'"></text>
									<view v-else class="lock_icon">
										<text class="fcon-a-Frame427321310"></text>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->

		<view class="bot_padbox"></view>
		<view class="meal_botbx padding-top-xs">
			<view class="bot_main" :class="{scemt:curAddLists.length<=0}">
				<view class="bmtop">
					<view class="bmtbox">
						<!-- loaded&&selecttData.sList.length>0 -->
						<view v-if="curAddLists.length>0" class="padding-left flex align-center text-white text-sm">
							<text class="flex-sub">已选餐品</text>
							<view class="padding-tb-xxs padding-lr" @click="tapClearCar">
								<text class="cuIcon-delete"></text>
								清空
							</view>
						</view>
						<view class="flex shuline p_rlt">
							<scroll-view scroll-x="true" class="bot_scr">
								<view v-if="curAddLists.length<=0" class="padding-left">
									<view class="btitm p_rlt">
										<view class="btimg text-acenter"><text class="cuIcon-add text-white"></text>
										</view>
										<view class="btmsbx text-center text-xs">
											<view class="btcont text-acenter text-white d_ib">
												x0
											</view>
										</view>
									</view>

								</view>
								<view v-else class="mnav padding-left">
									<view v-for="(item,index) in curAddLists" :key="index" class="btitm p_rlt"
										@click="showPop('pop2',item)">
										<uni-transition :mode-class="['fade', 'slide-right']" :show="item.nums>0">

											<view v-if="!item.isMust" class="bttip text-acenter"
												@click.stop="delCarItem(item)">
												<text :class="item.disabled?'fcon-a-jiesuo11':'fcon-a-close'"></text>
											</view>

											<!-- imgBaseUrl + item.img||'' -->
											<!--  <image class="btimg" :src="env.FileUrl + item.img" mode="aspectFill"></image> -->
											<!-- <image class="btimg" :src="item.img" mode="aspectFill"></image> -->
											<tb-image width="92rpx" height="92rpx" borderRadius="10rpx"
												:src="imgBaseUrl+item.img">
												<template v-slot:error>
													<image src="../../../static/menuEmpty.png" class="btimg"
														mode="aspectFill"></image>
												</template>
											</tb-image>
                      <view class="hy text-center" v-if="item.isVip=='1'">
                        <text class="fcon-cvip hs_s"></text>
                      </view>
											<view class="btmsbx text-center text-xs">
												<view class="btcont text-acenter text-white d_ib"
													:class="{kx:item.type=='dz'}">
													<block v-if="item.type=='dz'">
														定制
													</block>
													<block v-else-if="item.isLock">
														<text class="fcon-a-Frame427321310"></text>
													</block>
													<block v-else>
														x{{item.nums||0}}
													</block>
												</view>
											</view>
										</uni-transition>
									</view>
								</view>
							</scroll-view>
							<view class="add_menu" @click.stop="getMores">
								<text class="cuIcon-add menu_icons"></text>
								<text class="menu_add_text">加菜</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bmbot flex align-center padding-right">
					<view class="bmlef text-center text-white p_rlt">
						<view class="total_moneys">
							<!-- selecttData -->
							<text class="moneys_front">¥</text>{{calcData.totPayMoney}}
						</view>
						<!-- <view class="total_reduce">¥{{selecttData.totalMoney}}</view> -->
					</view>
					<view v-if="loaded&& curAddLists.length<=0" class="flex-sub text-xll text-center text-white">
						请选择餐品
					</view>
					<block v-else>
						<view class="bmsubbtn" @click="tapSubmit">
							{{copywriting}}
						</view>
					</block>

				</view>
			</view>
		</view>
		<dragButtons :changeX="changeDrag" :showStatus="showNav" isDock @btnTouchend="dragTouchend" :existTabBar="true"
			:maxWidth="644">
			<view class="dragMain" :class="{show:showNav}">
				<view class="expend_box">
					<view class="text-cuts">
						<view class="p_rlt d_ib text-center padding-lr-xs exitem">
							<view class="an_icons" :style="getClass()" @click.stop="tapToggleDrag()">
								<text class="fcon-shouqi" style="color:#FF9307;font-size: 16rpx;"></text>
							</view>
							<view class="ex_top flex flex-direction justify-center align-center"
								@click.stop="tapToggleDrag()">
								<view class="fn_toCal">{{suBtnKcal}}</view>
								<view class="fn_unit martmin">(kcal)</view>
								<view class="fn_unit padding-top-xxs">卡路里</view>
							</view>
						</view>
						<view v-for="(item,index) in dragList.fixexData" :key="index" class="text-center exitem d_ib">
							<view class="oth_box d_ib text-cuts" :style="{backgroundImage:`url(${item.backImgs})`}">
								<view class="list_value">{{item.value}}g</view>
								<view class="list_name text-cuts">{{item.name}}</view>
							</view>
						</view>
					</view>

					<view class="flex align-center">
						<view class="change_box flex-sub text-cuts" v-for="(item,index) in dragList.changeData"
							:key="index">
							<view class="ch_val text-cuts">{{item.value}}</view>
							<view class="ch_name text-cuts">{{item.name}}</view>
						</view>
					</view>

				</view>
			</view>

		</dragButtons>
		<loading></loading>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, computed } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { showLoading, hideLoading } from '@/utils/helper';
	import mApi from "@/utils/mapi";
	// import speciModal from '@/components/speciModal/speciModal.vue'
	import speciModal from './spcModel.vue'
	import setAutoMeal from '@/components/setAutoMeal/setAutoMeal.vue';
	import { mnavTo } from '@/utils/helper';
	import { env } from '@/api/env.js';
	import dragButtons from "@/components/dragButton/drag-button.vue"
	import { getGoodDetail, editCart, addMealCart, clearCart } from "../../../api/vmeitime-http";
	import { useCartStore } from '@/stores/cartStore';
	import { useShopStore } from '@/stores/shopStore';
	const cartStore = useCartStore();
	const shopStore = useShopStore();
	const changeDrag = ref(false)
	const showNav = ref(false)
	const pop1 = ref(null);
	const pop2 = ref(null);
	const pop3 = ref(null);
	const loaded = ref(false)
	const showCad = ref(false)//是否展开日历
	const showCalSub = ref(false)//是否展开日历详情
	const hasRecord = ref(false)//是否展示记录模块
	const suBtnKcal = ref("999")
	const iconUrl = ref(env.FileUrl + "food/ico/images/")
	const indexFlag = ref(0)
	const indexList = ref(0)
	const copywriting = ref('加入购物车')
	const cancelData = ref([
		{
			state: false,
			text: '取消全天'
		},
		{
			state: false,
			text: '取消中餐'
		},
		{
			state: false,
			text: '取消晚餐'
		}
	])
	// const mealTitle = ref([
	// 	{
	// 		text: '看图点菜'
	// 	},
	// 	{
	// 		text: '菜名点菜'
	// 	}
	// ])
	const weekend = ref([
		{
			time: '今日',
			text: '',
			statue: 0,
		},
		{
			time: '18',
			text: '二',
			statue: 1,  //吃过了 0  1 预约了  2待预约 
		},
		{
			time: '19',
			text: '三',
			statue: 1,  //吃过了 0  1 预约了  2待预约 
		},
		{
			time: '20',
			text: '四',
			statue: 1,  //吃过了 0  1 预约了  2待预约 
		},
		{
			time: '21',
			text: '五',
			statue: 1,  //吃过了 0  1 预约了  2待预约 
		},
		{
			time: '22',
			text: '六',
			statue: 2,  //吃过了 0  1 预约了  2待预约 
		},
		{
			time: '23',
			text: '日',
			statue: 2,  //吃过了 0  1 预约了  2待预约 
		}
	])
	const dragList = ref(
		{
			fixexData: [{
				value: "99",
				name: "膳食纤维",
				backImgs: iconUrl.value + "car_bg04.png"
			}, {
				value: "99",
				name: "碳水",
				backImgs: iconUrl.value + "car_bg05.png"
			}, {
				value: "99",
				name: "脂肪",
				backImgs: iconUrl.value + "car_bg06.png"
			}],
			changeData: [
				{
					value: "9",
					name: "食物种类",
				}, {
					value: "5",
					name: "维C",
				}, {
					value: "6",
					name: "钙",
				}, {
					value: "18",
					name: "铁",
				}, {
					value: "152",
					name: "维A",
				}
			]
		}
	)
	const curGoodsId = ref('');//goodsid
	const mealDetail = ref<any>({});
	const sxpGroupList = ref<any>([]);//商品组列表
	const curSingleMealType = ref<any>('');//当前单套餐类型1176任选，1175固定
	onLoad((options) => {
		// console.log('getsys',wx.getDeviceInfo())
		hasRecord.value = options.hasRecord;
		curGoodsId.value = options.goodsId;
		loadData();

		initCalenList();
		// initCarData()
		// const sys = uni.getSystemInfoSync();
		// this.windowWidth = sys.windowWidth;
		// this.windowHeight = sys.windowHeight;
	});
	onShow(() => {
		console.log('show', cartStore.tcsCarList)
		if (cartStore.tcsCarList && cartStore.tcsCarList.length > 0) {
			upAllData()

		}

		// cartStore.tcsCarList
	})
	//更新购物车及列表数据
	const upAllData = (source : any = '') => {
		let marr = JSON.parse(JSON.stringify(cartStore.tcsCarList));
		let nlist = curAddLists.value.filter(item => item.isTaoCan);
		let index = marr.findIndex(item => item.replaceSku);
		console.log('newCar00nlist', nlist[0].name)
		console.log('newCar00marr', marr)

		// 来自替换组商品-底部购物车换一个
		if (index >= 0) {
			let cindex = index >= 0 ? nlist.findIndex(item => item.sku == marr[index].replaceSku) : -1;
			if (cindex >= 0) {
				let nitm = Object.assign({}, nlist[cindex], marr[index])
				marr.splice(index, 1, nitm);
				marr[index].nums >= nlist[cindex].nums ? nlist.splice(cindex, 1) : nlist[cindex].nums = nlist[cindex].nums - marr[index].nums;

			}

		}
		curAddLists.value = nlist.concat(marr);
		upGoodGoups();
		console.log('newCar', curAddLists.value)
		changeListNums('init')
		cartStore.setTsCarList();
		console.log('newCar33', cartStore.tcsCarList)
	}

	const getGroups = () => {
		let r : any = { skus: {} };//cartStore.tcsCarList 
		if (curAddLists.value.length > 0) {
			let spcMergedData = {};//sku分组
			curAddLists.value.forEach((item : any) => {
				if (spcMergedData[item.sku]) {
					spcMergedData[item.sku].num += item.nums;
				} else {
					spcMergedData[item.sku] = { num: item.nums, sku: item.sku };
				}
			});
			r.skus = spcMergedData;
			// r.skus = Object.values(spcMergedData);
		}
		return r.skus;//只需sku
	}
	// 加载数据
	const loadData = async (source : any = '') => {
		try {
			showLoading();
			let res = await getGoodDetail({ goodsId: curGoodsId.value })
			hideLoading();
			if (!res.result) {
				return
			}
			loaded.value = true
			let nres = res.object || {};
			mealDetail.value = nres;
			curSingleMealType.value = nres.sxp_mode || '';
			uni.setNavigationBarTitle({
				title: nres.name || '套餐'
			});

			sxpGroupList.value = initGoods(nres.sxpGroupList || []);
			console.log('mealDetail', mealDetail.value)
			console.log('sxpGroupList', sxpGroupList.value)

		} catch (e) {
			console.error(e)
			showLoading();
		}

	}

	const ruleGoup = ref<any>({});//保存每组的数据
	// 初始化数据
	const initGoods = (list) => {
		let group = {};
		list.forEach((item, index) => {
			let clist = item.specList || [], basePrice = null;
			// 任选一basePrice 价格展示逻辑
			if (item.min_nums >= 1 && item.max_nums <= 1) {
				let defindex = clist.findIndex(ditem => ditem.is_default_buy == '5')
				defindex >= 0 ? basePrice = (shopStore.costPlan == '1130' ? clist[defindex].sxp_site_sell_price ?? 0 : clist[defindex].sxp_out_sell_price ?? 0) : '';
			}
			for (let i = 0; i < clist.length; i++) {
				let citem = clist[i];
				// is_default_buy是否默认选中/数量展示
				// is_more_buy是否允许多买
				// is_must_buy是否必买
				// citem.num = citem.is_default_buy == '5' || citem.is_must_buy == '5' ? citem.min_nums : 0;//当前默认数量
				// citem.smaxNums = citem.is_more_buy == '6' ? citem.min_nums || 0 : citem.max_nums || 0;
				citem.findex = index;
				citem.fminNums = item.min_nums;//组最小购买数量
				citem.fmaxNums = item.max_nums;
				citem.fname = item.vname || '';//组名
				citem.fShowMore = item.is_add_goods == '5';//组是否展示更多按钮
				citem.fReplace = item.is_update_goods == '5';//组是否可更换商品
				citem.num = citem.is_default_buy == '5' || citem.is_must_buy == '5' ? (citem.nsell_nums>0&&citem.sku_status=='233'&&citem.nsell_nums>=citem.min_nums ? citem.min_nums:0) : 0;//当前默认数量
				citem.isLock = citem.is_must_buy == '5' && citem.is_more_buy == '6' || (citem.is_must_buy=='5'&&citem.max_nums=='1'&&citem.min_nums=='1');//锁
				citem.sminNums = citem.min_nums || 0;
				citem.smaxNums = citem.nsell_nums>0&&citem.sku_status=='233'&&citem.nsell_nums>=citem.min_nums?citem.is_more_buy == '6' ? (citem.min_nums || 0) : (citem.nsell_nums>=citem.max_nums?citem.max_nums || 0:citem.nsell_nums):0;//
				citem.isMust = citem.is_must_buy == '5';
				citem.isBuyMore = citem.is_more_buy == '5';
				citem.isTaoCan = true;//套餐组内商品
				citem.showPrice = null;//展示价格
				let nprice = (shopStore.costPlan == '1130' ? citem.sxp_site_sell_price ?? 0 : citem.sxp_out_sell_price ?? 0);
				if (basePrice != null&&citem.is_default_buy!='5') {
					citem.isPosPrice = nprice >= basePrice;
					citem.showPrice = transQsPrice(Math.abs(nprice - basePrice));//citem.is_default_buy=='5'?nprice:(nprice - basePrice)
				}
				let param = {
					fname: citem.fname,//组名
					fminNums: citem.fminNums || 0,//组最小购买数量
					fmaxNums: citem.fmaxNums || 0,
					fReplace: citem.fReplace,//组是否可更换商品
					sminNums: citem.sminNums,//商品最起购数量
					smaxNums: citem.smaxNums,
					isLock: citem.isLock,//锁
					isMust: citem.isMust,//是否必须购买
					isBuyMore: citem.isBuyMore,//是否允许多买
					isTaoCan: true,//套餐组内商品
					name: citem.goodsname || '',//商品名
					img: citem.vimage || citem.vmaster_product_image_id || '',
					nums: citem.num,
					goods_id: citem.goods_id,
					sku: citem.sku,
					labelIds: citem.labelIds || [],
					nprice: nprice,
					storeNum:citem.nsell_nums||0,
					status:citem.sku_status

				}
				!group[citem.goods_id] ? group[citem.goods_id] = { tnums: (citem.num || 0), ...param } : group[citem.goods_id].tnums += citem.num;
				// console.log('cccc++',citem.num,group)
				if (citem.is_default_buy == '5' || citem.is_must_buy == '5') {

					curAddLists.value.push(param)
				}

			}
			ruleGoup.value = group;//当前购物车数量按goods_id分组
		})
		console.log('初始化购物车addlist', curAddLists.value);
		console.log('初始化购物车ruleGoup', ruleGoup.value);

		return list
	}

	const transQsPrice = (num : any) => {
		if (Number.isInteger(num)) {
			return num; // 如果是整数，直接返回
		} else {
			return num.toFixed(2); // 否则，保留两位小数
		}
	}
	// 获取商品当前可购买数
	const getSmaxNum = (item : any, source : any = '') => {

		let group = ruleGoup.value, tnum = 0, max = item.max_nums || 0;
		if (item.fmaxNums > 0) {
			// curAddLists.value.forEach(citem=>{
			// 	!group[citem.goods_id]?group[citem.goods_id] = {tnums:citem.nums,...citem}:group[citem.goods_id].tnums+=citem.nums;
			// })
			tnum = group[item.goods_id] ? group[item.goods_id].tnums : 0;
			max = tnum >= item.fmaxNums && item.num > 0 ? item.num : item.max_nums;//获取商品当前可购买数 组剩余能购买最大数 当前商品数量（任选一自动重置其他商品数量为0）
		}

		return max
	}
	// 是否重置购物车及商品-根据组最大数操作商品，规则-按顺序删除组商品列表靠前商品
	const needRzNum = (item : any, source : any = '') => {
		// console.log('needRzNumfn',ruleGoup.value)
		let group = ruleGoup.value, tnum = 0, needRz = false;
		tnum = group[item.goods_id] ? group[item.goods_id].tnums : 0;
		console.log('needRzNumfn', group[item.goods_id], group[item.goods_id].tnums, tnum)
		needRz = item.fmaxNums > 0 && tnum >= item.fmaxNums ? true : false;
		// console.log('needRzNumfn++',item.fmaxNums>0,tnum>=item.fmaxNums,tnum,group[item.goods_id],item.fmaxNums)
		return needRz
	}

	const calcData = computed(() => {
		let r : any = { totPayMoney: 0 }, totBaseMoney = 0, moreMoney = 0;
		//固定套餐
		if (curSingleMealType.value == '1175') {
			totBaseMoney = shopStore.costPlan == '1130' ? mealDetail.value.site_sell_price : mealDetail.value.out_sell_price;
			let arr = curAddLists.value.filter(item => !item.isTaoCan);//更多中添加的商品
			if (arr.length > 0) {
				arr.forEach(aitem => {
					moreMoney += (aitem.nprice || 0) * aitem.nums;
				})
			}
		} else {
			curAddLists.value.forEach(item => {
				totBaseMoney += (item.nprice || 0) * item.nums;
			})
		}
		r.totPayMoney = transQsPrice(totBaseMoney + moreMoney);
		return r
	})

	// const addParams = computed(() => {
	// 	let r : any = [];
	// 	sxpGroupList.value.forEach(item => {
	// 		let clist = item.specList || [];
	// 		for (let i = 0; i < clist.length; i++) {
	// 			let citem = clist[i];
	// 			citem.num > 0 && r.push({
	// 				name: citem.goodsname || '',
	// 				img: citem.vimage || citem.vmaster_product_image_id || '',
	// 				nums: citem.num,
	// 				sku: citem.sku,
	// 				goods_id: citem.goods_id,
	// 				labelIds: citem.labelIds || []
	// 			})
	// 			// let index = cachDefCarList.value.findIndex(fitem=>fitem.sku==citem.sku)
	// 			// if(index>=0){

	// 			// }else{

	// 			// }
	// 		}

	// 	})
	// 	console.log('addParams', r)
	// 	// cachDefCarList.value = r;
	// 	return r;
	// });
	// 添加购物车商品
	const curAddLists = ref<any>([]);
	const haSubmited = ref(false)
	// const initParams = (arr : any = []) => { }
	
	//添加购物车
	const addCart = async () => {
		if(haSubmited.value){
			mApi.msg("请勿重复提交哦")
			return
		}
		if (!verticalParams()) {
			return
		}
		try {
			let res : any = null, det : any = [];
			if (curAddLists.value.length <= 0) {
				mApi.msg("请选择商品")
				return
			}
			curAddLists.value.forEach(item => {
				if (item.nums > 0) {
					let sub : any = {
						dynamic_conver_group_id:item.replaceSku ?item.replaceGroupId||'':item.goods_id||'',
						sku: item.sku || 'MF001',
						nums: item.nums || 1,
						labelIds: item.labelIds
					}
					item.replaceSku ? sub.dynamic_conver_sku = item.replaceSku : '';
					det.push(sub)
				}
			})
			const params : any = {
				dynamic_id: mealDetail.value.goods_id || '',//随心配套商品ID SP20240823149803
				nums: 1,
				// patten:'SUBSCRIBE',
				details: det,
				// dpsku:['MF001','FQJD001'],//随心配加入的SKU,数组
				// dpnums:[1,2],//随心配加入的SKU,数组
				// labelIds: item.labelIds || []
			};
			// const params : any = item.isVip == '1' ? { ...baseParams, special_id: item.specialId } : { ...baseParams };
			if (cartStore.curOrderType && cartStore.curOrderType.type) {
				params.patten = cartStore.curOrderType.type;
				params.subsTime = cartStore.curOrderType.time.dateString
			}
			showLoading();
			res = await addMealCart(params);
			hideLoading()
			if (res && res.result) {
				haSubmited.value = true;
				let obj = { id: '6', source: 'singleMeal', action: 'addTCars' }
				uni.setStorageSync('menuact', obj)
				mApi.msg("加入购物车成功!")
				uni.navigateBack()
			} else {
				mApi.msg(res.shortMessage || "加入购物车失败!", res.code)

			}
		} catch (e) {
			hideLoading()
			console.error(e)
		}

	}

	const verticalParams = () => {
		let group = ruleGoup.value, msg = '', vtc = true;
		// curAddLists.value.forEach(item=>{
		// 	!group[item.goods_id]?group[item.goods_id] = {tnums:item.nums,...item}:group[item.goods_id].tnums+=item.nums;
		// })
		for (let key in group) {
			let citem = group[key];
			if (citem.tnums < citem.fminNums||(citem.nums<=0&&citem.isMust)) {
				msg = (citem.nums<=0&&citem.isMust)?'必选菜' + citem.name + (citem.storeNum<=0||citem.storeNum<citem.sminNums?'库存不足':'已下架') + '无法约餐': '请添加' + citem.fname + '商品哦';				
				vtc = false
				break
			}
		}
		mApi.msg(msg);
		console.log('verticalParams', group, vtc);
		return vtc
	}
	// console.log('object',timeStr);
	const mealList = ref([
		{
			tabName: "固定推荐",
			tabList: [
				{
					id: '0',
					name: '蒜苗孜然牛肉',
					dis1: '小份(约100g)',
					dis2: '111Kcal',
					img: 'https://cdn-static.yekjx.com/food/images/meal_img06.png',
					select: false,
					num: 1,
					isLock: true,
					disabled: true,
					price: "28.00"
				},
				{
					id: '1',
					name: '手撕鸡',
					dis1: '小份(约100g)',
					dis2: '178Kcal',
					img: 'https://cdn-static.yekjx.com/food/images/sw_img01.png',
					select: true,
					num: 1,
					isLock: false,
					disabled: false,
					price: "28.00",
					type: 'dz'
				}, {
					id: '2',
					name: '番茄鸡蛋',
					dis1: '小份(约100g)',
					dis2: '178Kcal',
					img: 'https://test-cdn-static.yekjx.com/resouces/goods/1723444678726.jpg',
					select: false,
					num: 1,
					isLock: false,
					disabled: false,
					price: "28.00"
				}, {
					id: '3',
					name: '手撕鸡',
					dis1: '小份(约100g)',
					dis2: '178Kcal',
					img: 'https://test-cdn-static.yekjx.com/resouces/goods/1722567991273.png',
					select: false,
					num: 1,
					isLock: false,
					disabled: false,
					price: "28.00"
				}, {
					id: '4',
					name: '手撕鸡',
					dis1: '小份(约100g)',
					dis2: '178Kcal',
					img: 'https://test-cdn-static.yekjx.com/resouces/goods/1722493563264.jpg',
					select: false,
					num: 1,
					isLock: false,
					disabled: false,
					price: "28.00"
				}
			]
		}, {
			tabName: "水果",
			tabList: [
				{
					id: '0',
					name: '炎陵黄桃 中果',
					dis1: '1个',
					dis2: '111Kcal',
					img: 'https://test-cdn-static.yekjx.com/resouces/goods/1723859555303.png',
					select: false,
					num: 1,
					isLock: true,
					disabled: true,
					price: "28.00"
				},
				{
					id: '1',
					name: '洛川苹果 大果',
					dis1: '4个/盒 约720-750g/份',
					dis2: '178Kcal',
					img: 'https://test-cdn-static.yekjx.com/resouces/goods/1724029306007.png',
					select: true,
					num: 1,
					isLock: false,
					disabled: false,
					price: "28.00"
				}
			]
		}, {
			tabName: "汤",
			tabList: [
				{
					id: '0',
					name: '当归玉竹乌鸡汤',
					dis1: '260ml/份',
					dis2: '111Kcal',
					img: 'https://cdn-static.yekjx.com/food/images/meal_img05.png',
					select: false,
					num: 1,
					isLock: true,
					disabled: true,
					price: "28.00"
				},
				{
					id: '1',
					name: '胶原雪燕金耳羹',
					dis1: '300ml/份',
					dis2: '178Kcal',
					img: 'https://test-cdn-static.yekjx.com/resouces/goods/1722567876187.png',
					select: true,
					num: 1,
					isLock: false,
					disabled: false,
					price: "28.00"
				}
			]
		}
	])
	let state = reactive({
		calenList: [],
		swiperList: [{
			id: 0,
			type: 'image',
			url: 'https://cdn-static.yekjx.com/food/images/sw_img01.png'
		}, {
			id: 1,
			type: 'image',
			url: 'https://cdn-static.yekjx.com/food/images/sw_img01.png',
		}],
		mealList1: [
			{
				id: '0',
				name: '蒜苗孜然牛肉',
				dis1: '小份(约100g)',
				dis2: '111Kcal',
				img: 'food/images/meal_img06.png',
				select: false,
				num: 0,
				isLock: true,
				disabled: true,
				price: "28.00"
			},
			{
				id: '1',
				name: '手撕鸡',
				dis1: '小份(约100g)',
				dis2: '178Kcal',
				img: 'food/images/meal_img05.png',
				select: true,
				num: 1,
				isLock: false,
				disabled: false,
				price: "28.00"
			}, {
				id: '2',
				name: '手撕鸡',
				dis1: '小份(约100g)',
				dis2: '178Kcal',
				img: 'food/images/meal_img05.png',
				select: true,
				num: 1,
				isLock: false,
				disabled: false,
				price: "28.00"
			}, {
				id: '3',
				name: '手撕鸡',
				dis1: '小份(约100g)',
				dis2: '178Kcal',
				img: 'food/images/meal_img05.png',
				select: true,
				num: 1,
				isLock: false,
				disabled: false,
				price: "28.00"
			}, {
				id: '4',
				name: '手撕鸡',
				dis1: '小份(约100g)',
				dis2: '178Kcal',
				img: 'food/images/meal_img05.png',
				select: true,
				num: 1,
				isLock: false,
				disabled: false,
				price: "28.00"
			}
		],

		carList: [],
		dzfId: '',
		dztId: '',
		tapcalx: 0,
		tapcaly: 0
	});
	const imgBaseUrl = ref(env.imgBaseUrl);
	//取消约餐选择
	const tabRadioSel = (list : any) => {
		cancelData.value.forEach((item) => {
			item.state = false
		});
		list.state = true
	}
	//点单模式切换
	const selecTab = (index : any) => {
		indexFlag.value = index
	}
	//文字版点单
	const selecList = (item : any, index : any, data : any) => {
		if(item.sku_status!='233'){
			//不等于233的表示已下架等不可加入购物车状态
			return
		}
		if ((item.isMust || item.isLock) && item.num > 0) {
			return
		}


		if (item.num > 0) {
			item.oldNum = item.num;
			item.num = 0
		} else {
			if (getSmaxNum(item) <= 0) {
				return
			}
			// if (item.fmaxNums == 1) {
			// 	let list = sxpGroupList.value[item.findex].specList || [];
			// 	list.forEach(litem => {
			// 		item.sku && item.sku != litem.sku ? litem.num = 0 : '';
			// 	})
			// }
			item.num = item.oldNum ? item.oldNum : item.sminNums || 1;
		}
		let param = {
			findex: item.findex,
			fname: item.fname,//组名
			fminNums: item.fminNums || 0,//组最小购买数量
			fmaxNums: item.fmaxNums || 0,
			fReplace: item.fReplace,//组是否可更换商品
			sminNums: item.sminNums,
			smaxNums: item.smaxNums,
			isLock: item.isLock,//锁
			isMust: item.isMust,//是否必须购买
			isBuyMore: item.isBuyMore,//是否允许多买
			isTaoCan: true,//是否套餐商品
			name: item.goodsname || '',
			img: item.vimage || item.vmaster_product_image_id || '',
			nums: item.num,
			goods_id: item.goods_id,
			sku: item.sku,
			labelIds: item.labelIds || [],
			nprice: (shopStore.costPlan == '1130' ? item.sxp_site_sell_price ?? 0 : item.sxp_out_sell_price ?? 0),
			storeNum:item.nsell_nums||0,
			status:item.sku_status

		}
		changeCar(item.sku, item.num, param);
		// console.log(item.select, index)
	}
	const dragDirect = ref('right')
	const curList = ref([])
	const getClass = () => {
		if (showNav.value == false) {
			if (dragDirect.value == 'left') {
				return 'transform: rotateY(360deg);'
			} else {
				return 'transform: rotateY(180deg);'
			}
		}
		if (showNav.value == true) {
			if (dragDirect.value == 'left') {
				return 'transform: rotateY(180deg);'
			} else {
				return 'transform: rotateY(360deg);'
			}
		}
	}
	const dragTouchend = (params : any) => {
		dragDirect.value = params.direction;
	}
	const tapToggleDrag = () => {
		showNav.value = !showNav.value
		changeDrag.value = true;
		setTimeout(() => {
			changeDrag.value = false;
		}, 10);
	}
	const computedStyle = computed(() => ({
		marginTop: '-30rpx',//hasRecord.value ? '0' : '-30rpx'
		// boxShadow: hasRecord.value ? '0px -4px 10px 0px rgba(1, 33, 18, 0)' : '0px -4px 10px 0px rgba(1, 33, 18, 0.4)',
		borderRadius: hasRecord.value ? '0 !important' : '20rpx 20rpx 0 0',//20rpx 取消间隔-1  
	}))
	// const carList = computed(() => {
	// 	return curList.value.filter(item => item.num > 0);
	// });
	const selecttData = computed(() => {
		let num = 0,
			totalMoney = 0,
			vipDisMoney = 0,
			slcs = [];
		// curList.value.forEach(item => {
		// 	item.selectNums > 0 ? (num += item.selectNums || 0) : "";
		// 	item.num > 0 ? (totalMoney += ((item.price || 0) * (item.num || 0))) : "";
		// 	item.selectNums > 0 && slcs.push(item)
		// });

		mealList.value.forEach(item => {
			item.tabList.forEach(j => {
				// j.num > 0 ? (totalMoney += ((parseFloat(j.price) || 0) * (j.num || 0))) : "";
				if (j.select) {
					totalMoney += ((parseFloat(j.price) || 0) * (j.num || 0))
					slcs.push(j)
				}
			});
		});

		let slc = {
			totalNum: num,
			sList: slcs,
			title: '已选VIP专区券使用明细',
			totalMoney: totalMoney,
			vipDisMoney: vipDisMoney
		};
		console.log('slc.sList---------------------', slc.sList)
		return slc;
	});
	const goodList = ref([])
	goodList.value = [...state.mealList1]
	const initCarData = () => {
		//初始化car,模拟
		curList.value = goodList.value;
		console.log(' curList.value----', curList.value)
		// loaded.value = true
		// carList.value 
		// let cindex  = curList.value.findIndex(item=>item.num>0);
		// carList.value 
		// console.log('car-init0',curList.value)
	}
	//切换日历
	const tapToggleCal = () => {
		showCad.value = !showCad.value
		console.log('showCad.value -------------', showCad.value)
	}
	const curMonth = ref(null)
	const filcalen = ref(false)
	// 汉字表示的一周中的每一天
	const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
	// 初始化日历数据
	const initCalenList = () => {
		//当前
		let year = new Date().getFullYear();
		let month = new Date().getMonth();
		curMonth.value = month + 1
		// let  currDay = new Date().getDate();
		// 总天数
		console.log('initCalenList0', year, month);
		let date = new Date(year, month, 0);
		console.log('initCalenList', year, month, date);
		let days = date.getDate();
		// 第一天/最后一天星期几
		let dayListItem = [];
		let whichFirstDay = new Date(year, month, 1).getDay();
		let whichLastDay = new Date(year, month, days).getDay();
		let wk = whichFirstDay
		console.log('总天数-第一天-最后一天', days, whichFirstDay, whichLastDay);
		const getRandomState = () => {
			// 生成 0、1 或 2 中的一个随机状态
			return Math.floor(Math.random() * 3);
		};
		// 随机生成状态的函数
		for (let i = 1; i <= days; i++) {
			wk = wk > 6 ? 0 : wk
			let listItem = {
				num: i,
				name: weekDays[wk],
				action: i == 8 || i == 9 || i == 10 || i == 11 || i == 12 ? true : false,
				actnum: i == 8 || i == 10 ? 1 : i == 9 || i == 11 ? 2 : i == 12 ? 3 : '',
				state: getRandomState() // 生成随机状态
			};
			dayListItem.push(listItem);
			wk++
		}
		for (let i = 0; i < whichFirstDay; i++) {
			dayListItem.unshift({ space: true, num: '' });
		}

		let nlastDay = whichLastDay == 0 ? 6 : 7 - (Number(whichLastDay) + 1);
		for (let i = 0; i < nlastDay; i++) {
			dayListItem.push({ space: true, num: '' });
		}
		// console.log('dayListItem-----------------------------------------', dayListItem);
		dayListItem.length > 35 ? (filcalen.value = true) : (filcalen.value = false);
		state.calenList = dayListItem
	}
	// 预约弹窗一周
	const getClassNew = (statue : any) => {
		return {
			bgHover: statue === 0 || statue === 1,
			borderHover: statue === 0,
			fontSizes: statue === 1,
			border999: statue === 2
		}
	}

	//修改数量-number
	const changeNum = (e : any) => {
		console.log('changenum+', e, e.sku.num);
		const csku = e.sku.sku || '', citem = e.sku, cnum = e.nums;
		// if(getRemainNum(citem)){

		// }
		// getSmaxNum(item)//最大数：需根据当前组的商品总数与组允许的最大数动态变化
		let param = {
			findex: citem.findex,
			fname: citem.fname,//组名
			fminNums: citem.fminNums || 0,//组最小购买数量
			fmaxNums: citem.fmaxNums || 0,
			fReplace: citem.fReplace,//组是否可更换商品
			sminNums: citem.sminNums,
			smaxNums: citem.smaxNums,
			isLock: citem.isLock,//锁
			isMust: citem.isMust,//是否必须购买
			isBuyMore: citem.isBuyMore,//是否允许多买
			isTaoCan: true,//是否套餐商品
			name: citem.goodsname || '',
			img: citem.vimage || citem.vmaster_product_image_id || '',
			nums: cnum,
			goods_id: citem.goods_id,
			sku: citem.sku,
			labelIds: citem.labelIds || [],
			nprice: (shopStore.costPlan == '1130' ? citem.sxp_site_sell_price ?? 0 : citem.sxp_out_sell_price ?? 0),
			storeNum:citem.nsell_nums||0,
			status:citem.sku_status

		}
		// if (citem.fmaxNums == 1) {
		// 	let list = sxpGroupList.value[citem.findex].specList || [];
		// 	list.forEach(litem => {
		// 		citem.sku && citem.sku != litem.sku ? litem.num = 0 : '';
		// 	})
		// }
		changeCar(csku, cnum, param);

		console.log('changenum', curAddLists.value);
		// initCarData();
		// curAddLists.value;
	}
	// 同步购物车商品
	const changeCar = (sku : any = '', num : any = 0, item : any) => {
		const caindex = curAddLists.value.findIndex(item => sku && sku == item.sku);
		caindex >= 0 ? (num <= 0 ? curAddLists.value.splice(caindex, 1) : curAddLists.value[caindex].nums = num) : curAddLists.value.push(item);
		// item.fmaxNums==1
		// 重置组商品/购物车数量
		const needRz = needRzNum(item);
		let group = ruleGoup.value;
		console.log('remain++', caindex, needRz, group, group[item.goods_id].tnums)
		if (needRz) {
			let changed = false;
			let index = sxpGroupList.value.findIndex(fitem => fitem.goods_id == item.goods_id);
			let ngoods = index >= 0 ? sxpGroupList.value[index].specList || [] : [];//组
			console.log('index-ngoods', index, ngoods)
			let needN = num;
			if (ngoods.length > 0) {
				for (let i = 0; i < ngoods.length; i++) {
					let nitem = ngoods[i];
					console.log('index-ngoods1', nitem,nitem.num,sku != nitem.sku)
					if ( nitem.num&&sku != nitem.sku && !nitem.isLock) {
						changed = true;
						console.log('index-ngoods2----------', nitem.num,sku != nitem.sku)
						if (needN > nitem.num) {
							needN = needN - nitem.num;
							nitem.num = 0;
							delCarItem(nitem, 'car');//删除购物车该商品
						}
						if (needN <= nitem.num) {
							nitem.num = nitem.num - needN;
							nitem.num <= 0 && delCarItem(nitem, 'car');//删除购物车该商品
							if (nitem.num > 0) {
								const cindex = curAddLists.value.findIndex(citem => citem.sku && citem.sku == nitem.sku);
								cindex >= 0 ? curAddLists.value[cindex].nums = nitem.num : '';
								console.log('index-ngoods111', nitem.num, cindex, curAddLists.value)
							}
							break
						}
					}

				}
			}
			console.log('替换商品', changed)
			if (!changed&&0) {
				// 暂-替换商品
				let hindex = curAddLists.value.findIndex(ritem => ritem.replaceGroupId);
				console.log('替换商品0', hindex)
				if (hindex >= 0) {
					let carItem = curAddLists.value[hindex]
					if (needN > carItem.nums) {
						console.log('替换商品1')
						curAddLists.value.splice(hindex, 1);//删除购物车该商品
					}
					if (needN <= carItem.nums) {
						console.log('替换商品2')
						carItem.nums = carItem.nums - needN;
					}
				}

			}


		}
		// 更新goods_id分组
		upGoodGoups()
		// for (let key in group) {
		// 	group[key].tnums = 0; 
		// 	for (let i = 0; i < curAddLists.value.length; i++) {
		// 		 curAddLists.value[i].goods_id==key?group[key].tnums+=curAddLists.value[i].nums:'';
		// 	}
		// 	// let mindex = curAddLists.value.findIndex(c=>c.goods_id==key)
		// 	// mindex>=0?group[key].tnums+=curAddLists.value[mindex].nums:'';
		// }
		// curAddLists.value.forEach(citem=>{
		// 	group[citem.goods_id].tnums = 0;
		// 	if(group[citem.goods_id]){
		// 		group[citem.goods_id].tnums+=citem.nums;
		// 	}
		// })
		// ruleGoup.value = group;//当前购物车数量按goods_id分组
		console.log('同-步购物车商品', curAddLists.value)
		console.log('同-步购物车goods_id分组', group)
	}
	// 更新goods_id分组
	const upGoodGoups = () => {
		let group = ruleGoup.value;
		console.log(group,"groupgroup")
		for (let key in group) {
			group[key].tnums = 0;
			for (let i = 0; i < curAddLists.value.length; i++) {
				curAddLists.value[i].goods_id=curAddLists.value[i].replaceGroupId?curAddLists.value[i].replaceGroupId:curAddLists.value[i].goods_id;
				curAddLists.value[i].goods_id == key || curAddLists.value[i].replaceGroupId == key ? group[key].tnums += curAddLists.value[i].nums : '';
				curAddLists.value[i].nums<=0&&curAddLists.value.splice(i, 1);
			}
		}
		console.log('更新goods_id分组', group)
	}
	const changeNums1 = (list : any = [], sku : any, num : any) => {
		let nindex = list.findIndex(nitem => sku != nitem.sku && nitem.num > 0);
		console.log('index-ngoods1', nindex)
		if (nindex >= 0) {
			let group = ruleGoup.value;
			let nitem = list[nindex];//修改商品数量
			let cnm = group[nitem.goods_id].tnums - num;
			console.log('index-ngoods2', group, cnm)
			nitem.num = cnm >= 0 ? cnm : 0;//自动调整修改组商品数量-规则，从左到右替换商品数量
			let cindex = curAddLists.value.findIndex(citem => item.goods_id == citem.goods_id && citem.sku == list[nindex].sku);
			cindex >= 0 ? nitem.num <= 0 ? curAddLists.value.splice(cindex, 1) : curAddLists.value[cindex].nums = nitem.num : '';
		}
	}
	//  changeModalNum
	// 规格弹窗-修改数量
	const confirmModalNum = (e) => {
		changeListNums(e.sku, e.nums)
	}
	// 规格弹窗-删除指定商品
	const modalDel = (e) => {
		console.log('modalDel', e)
		delCarItem(e)
	}

	// 同步商品列表数量
	const changeListNums = (sku : any = '', num : any = 0) => {
		let zskus : any = {};//购物车sku分组
		if (sku == 'init') {
			zskus = getGroups()
		}
		console.log('zskus', zskus)
		sxpGroupList.value.forEach(item => {
			let clist = item.specList || [];
			for (let i = 0; i < clist.length; i++) {
				let citem = clist[i];
				if (sku === 'init') {
					citem.num = zskus[citem.sku] ? zskus[citem.sku].num : 0;
				}
				if (sku != 'init' && citem.sku == sku) {
					citem.num = num;
					break;
				}

			}

		})
	}
	// 删除购物车数据-购物车删除
	const delCarItem = (item : any, source : any = '') => {
		// item.nums = 0;
		console.log('delCarItem', item);
		const cindex = curAddLists.value.findIndex(citem => citem.sku && citem.sku == item.sku);
		cindex >= 0 ? curAddLists.value.splice(cindex, 1) : '';
		source != 'car' && upGoodGoups();//更新good_id分组
		source != 'car' && changeListNums(item.sku, 0);
		// selecttData.value.sList.splice(index, 1)
		// let cindex = carList.value.findIndex(citem => citem.id == item.id)
		// cindex >= 0 && carList.value.splice(cindex, 1)
	}
	// 清空
	const tapClearCar = () => {

		clearCar()//暂

		// selecttData.value.sList = []
		// mealList.value.forEach(item => {
		// 	item.tabList.forEach(j => {
		// 		// j.num > 0 ? (totalMoney += ((parseFloat(j.price) || 0) * (j.num || 0))) : "";
		// 		j.select = false
		// 		j.num = 0
		// 	});
		// });
		// curList.value = []
		// goodList.value.forEach(item => {
		//   item.num = 0
		//   item.select = false
		// })
	}
	const clearCar = () => {
		uni.showModal({
			title: '提示',
			content: '确定清空当前购物车么',
			confirmText: '确定',
			confirmColor: '#2AB05E',
			success: async res => {
				if (res.confirm) {
					try {
						curAddLists.value = curAddLists.value.filter(item => item.isMust)
						sxpGroupList.value.forEach(item => {
							let clist = item.specList || [];
							clist.forEach(j => {
								j.select = false
								j.num = 0
							});
						});

						// showLoading()
						// let params : any = {}
						// // cartStore.curOrderType && cartStore.curOrderType.type ? params.patten = cartStore.curOrderType.type : ''
						// let res = await clearCart(params)
						// hideLoading()
						// if (res.result) {
						// 	// initCar()
						// 	// emit("carNumChanges")
						// } else {
						// 	mApi.msg(res.shortMessage || '网络繁忙，请稍后再试!', res.code)
						// 	hideLoading()
						// }
					} catch (e) {
						console.error(e)
						// hideLoading()
						// mApi.msg('网络繁忙，请稍后再试!')
					}

				}
			}
		})
	}
	const canRepeat = ref(true)
	//下单
	const tapSubmit = () => {
		if (!canRepeat.value) {
			return
		}
		canRepeat.value = false;
		setTimeout(() => {
			canRepeat.value = true;
		}, 800)
		if (hasRecord.value) {
			// uni.setStorageSync('fromPages', 'meal')//暂时
			mnavTo('/pages/order/creatOrder/creatOrder')
			return
		}
		changeCart()


	}
	const changeCart = () => {

		addCart()

	}



	// 自动约餐文字
	const autoText = ref('')
	// 自动约餐确认
	const sureAuto = (param : any) => {
		autoText.value = param.text || ''
	}
	// const tabClass = ref(0)
	const showPop = (source : string, item : any = {}) => {
		console.log('showPop', item)
		switch (source) {
			case 'pop1':
				pop1.value?.open()
				break;
			case 'pop2':
				if (!item.isBuyMore) {
					//不允许多买
					return
				}
				console.log(item,"ruleGoup.value")
				let sxpNums = ruleGoup.value[item.goods_id].tnums;//当前组总数
				let max = item.fmaxNums - sxpNums - item.nums;
				item.sxp_mode=mealDetail.value.sxp_mode;
				pop2.value?.open(item, max)
				break;
			case 'pop3':
				pop3.value?.open()
				break;
			default:
				break;
		}
	}
	const hidePop = (source : string) => {
		switch (source) {
			case 'pop1':
				pop1.value?.close()
				break;
			case 'pop2':
				pop2.value?.close()
				break;
			case 'pop3':
				pop3.value?.close()
				break;
			default:
				break;
		}
	}
	// const tapdMeal = (item : AnyObject, list : AnyObject) => {
	// 	if (item.select) {
	// 		item.select = false
	// 		return
	// 	}
	// 	list.forEach((citem) => {
	// 		citem.select = false
	// 	})
	// 	item.select = !item.select
	// }

	// const tapCalItem1 = (event) => {
	// 	// const { width, height } = event.target.getBoundingClientRect();
	// 	// const rect = event.target.getBoundingClientRect();
	// 	console.log('tapcal', event);
	// 	// console.log('tapcal',event,width,height);
	// 	// tapcalx


	// }
	// const sys = uni.getSystemInfoSync();
	// const windowWidth = sys.windowWidth;
	// const windowHeight = sys.windowHeight;
	//取消约餐
	const tapCalItem = (item : any, event : any) => {
		if (item.state !== 2) {
			copywriting.value = '下单'
			const cur = event.currentTarget
			let oflef = cur.offsetLeft, oftop = cur.offsetTop
			state.tapcaly = oftop + uni.upx2px(80)
			state.tapcalx = oflef + uni.upx2px(49 - 10 - 14)
			showCalSub.value = !showCalSub.value
			const query = uni.createSelectorQuery();
			query.select('.mcitm').boundingClientRect(); // 选择类名为my-element的元素
			query.exec((res) => {
				if (res[0]) {
					// res[0]即为所需的元素信息
					// console.log(`宽度: ${res[0].width}px, 高度: ${res[0].height}px`,res,event);

				}
			});
		} else {
			showPop('pop3')
			copywriting.value = '取消'
			console.log('约约约-----------------')
		}
	}

	const cancel = () => {
		hidePop('pop3')
	}

	// 获取一个目标元素
	// const getElRect = (elClass, dataVal) => {
	// 	new Promise((resolve, reject) => {
	// 		const query = uni.createSelectorQuery().in(this);
	// 		query.select('.' + elClass).fields({size: true},res => {
	// 			// 如果节点尚未生成，res值为null，循环调用执行
	// 			if(!res) {
	// 				setTimeout(() => {
	// 					// getElRect(elClass);
	// 				}, 10);
	// 				return ;
	// 			}
	// 			console.log('elClass',elClass,res)
	// 			// state[dataVal] = res.height;
	// 		}).exec();
	// 	})
	// }	
	const tapShopItem = () => {
		// mnavTo('/pages/order/setMeal/setMeal?hasRecord=true')
		mnavTo('/pages/order/goodsDetial/goodsDetial?shopType=' + '&goodsId=' + mealDetail.value.goods_id)
		// uni.navigateTo({
		//   url: '/pages/order/goodsDetial/goodsDetial?shopType=1'
		// })
	}
	const tapItemSelec = (item : any) => {
		item.select = !item.select
		item.select ? item.num = 1 : item.num = 0
		//暂
		// let cindex = goodList.value.findIndex(citem=>citem.id==item.id)
		// if(cindex>=0){
		// let nitem = goodList.value[cindex]
		// nitem.select=!nitem.select
		// nitem.select?nitem.num=1:nitem.num=0
		// }
	}
	// 获取商品列表组信息及缓存更多交互数据
	const cacheListGroups = (obj : any = {}) => {
		console.log('cacheListGroups', obj)
		let skuGroup : any = {}, baseMoney = 0;
		sxpGroupList.value.forEach(citem => {
			let clist = citem.specList || [];
			clist.forEach(j => {
				!skuGroup[j.sku] ? skuGroup[j.sku] = { goods_id: j.goods_id, sku: j.sku, isTaoCan: true } : '';
			});
		})
		let marr = curAddLists.value.filter(citem => !citem.isTaoCan);
		let r = {
			source: obj.source,//更换-change
			changeGoupId: obj.source == 'replace' ? obj.goodsItem.goods_id : '',//更换商品detail
			type: curSingleMealType.value,
			baseMoney: baseMoney,
			cart: marr,
			skuGroup: skuGroup
		}
		console.log('skuGroup0', r)
		console.log('gengduo1', ruleGoup.value)
		cartStore.setTsCarList(r.cart);
		cartStore.setTmoreDetail(r)
	}
	// 更多
	const getMores = (item : any) => {
		item && console.log('gengduo', item.goods_id, item)
		cacheListGroups()
		// return;
		mnavTo('/pages/order/moreMeal/moreMeal');
	}
	const handelPre = (tabList : any, index : any, item : any) => {
		let imageIds = tabList.map(item => imgBaseUrl.value + (item.vimage || item.vmaster_product_image_id || ''))
		console.log(item)
		uni.previewImage({
			current: imageIds[index],
			urls: imageIds,
			success: () => {
				console.log("111")
			}
		})
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f2f2f2;
	}

	.popup-content {
		background-color: #fff;
		border-radius: 36rpx;
		width: 530rpx;
		padding-bottom: 40rpx;
		flex-shrink: 0;

		.textprop {
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}

		.listyuecan {
			width: 190rpx;
			margin-bottom: 40rpx;
		}

		.gapmar {
			flex-wrap: wrap;
		}

		.mdbtn {
			width: 202rpx;
			height: 80rpx;
			flex-shrink: 0;
			border-radius: 5px;
			border: 1px solid #5DB175;
			background-color: #fff;

			&:nth-child(2) {
				background-color: #5DB175;
				color: #fff;
			}
		}

		.mainbox {
			width: 430rpx;
			height: 254rpx;
			margin: 0 auto;

			.martB {
				margin: 26rpx 0 32rpx;
				color: #333;
				font-family: "Microsoft YaHei UI";
				font-size: 32rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 133%;
				/* 21.28px */
				letter-spacing: 0.32px;
			}
		}

		.popupEmil-btn {
			width: 430rpx;
			margin: 0 auto;
		}

		.mbprice {
			padding-top: 80rpx;
			font-size: 64rpx;
		}

	}

	.sizipic {
		color: #FFFDCA;
		font-family: "Microsoft YaHei UI";
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;

		.ionc_pic {
			color: #FFFDCA;
			font-family: "Microsoft YaHei UI";
			font-size: 10px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
	}

	.rotateStyleHover {
		transform: rotate(-90deg) !important;
		transition: all 0.3s ease !important;
	}

	.bg_container {
		padding: 50rpx 28rpx 20rpx;
		background: linear-gradient(180deg, #E4FEEE 5.33%, #FFF 100%);
		position: relative;

		.posiImg {
			position: absolute;
			top: -15rpx;
			left: 35rpx;
			width: 40rpx;
			height: 36rpx;
		}
	}

	.listUl {
		.bgHover {
			background-color: #53A87F !important;
			color: #fff !important;
		}

		.fontSizes {
			font-size: 20rpx !important;
		}

		.borderHover {
			border: 4rpx solid #4CDD97 !important;
		}

		.border999 {
			border: 1px solid #999 !important;
		}

		.cuIcon-check {
			color: #fff;
		}

		.borderLi {
			width: 68.77rpx;
			height: 66.86rpx;
			flex-shrink: 0;
			border-radius: 50%;
			color: #666;
			font-family: "Microsoft YaHei UI";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}

		.timeweek {
			font-size: 20rpx;
			margin-top: 10rpx;
			color: #999;
			font-family: "Microsoft YaHei UI";
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}

		.timeweekHover {
			font-size: 20rpx;
			color: #fff;
		}
	}

	.recBox {
		top: -30rpx;
		z-index: 5;
	}

	.automatic_con {
		border-radius: 20px 20rpx 0 0;
		background: #FFF;
		box-shadow: 0px -4px 5px 0px rgba(1, 33, 18, 0.50); //-4px 10px
	}

	.paddingxxx {
		padding: 0 28rpx 20rpx;
	}

	.paddingdzih {
		padding: 0 28rpx 0;
	}

	.title_matic {
		height: 120rpx;
	}

	.text-xll {
		font-size: 35rpx;
	}

	.rotateStyle {
		transform: rotate(90deg);
		display: inline-block;
		transition: all 0.3s ease !important;
		margin-left: 20rpx;
	}

	// .activeList{
	//   border: 1px solid #53A87F !important;
	// }
	.activeText {
		color: #53A87F !important;
	}

	.screen-swiper {
		height: 475rpx;
		background: #fff;
	}

	.topSec {
		min-height: 210rpx; //310
		background: #53A87F;
		z-index: 1;

		.tc_name {
			font-size: 48rpx;
		}
	}

	.container {
		background: #f2f2f2;
	}

	.textgd {
		color: #333;
		font-size: 32rpx;
		font-weight: 700;
	}
  .textgdnew{
    color: #333;
    font-size: 32rpx;
    font-weight: 400;
  }
	.text_price {
		color: #FC4C40;
		font-family: "Microsoft YaHei UI";
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.numBox {
		// margin-top: -13rpx;
		padding-right: 16rpx;
	}

	.text_name {
		// color: #333;
		// font-family: "Microsoft YaHei UI";
		// font-size: 28rpx;
		// font-style: normal;
		// font-weight: 400;
		// line-height: normal;
		// margin: 10rpx 0;
		// display: inline-block;
	}

	.leMeal_title {
		padding: 40rpx 0;
    &:nth-child(2){
      padding:0 0 40rpx 0;
    }
		.textcolor3 {
			color: #333;
		}

		.swtich_menu {
			width: 258rpx;
			height: 48rpx;
			border-radius: 62rpx;
			border: 1px solid rgba(93, 177, 117, 0.27);
			padding: 0 7rpx;

			.font_style {
				color: #999;
				width: 128rpx;
				height: 36rpx;
				font-size: 24rpx;
				font-weight: 400;
				border-radius: 62rpx;
			}

			.active {
				color: #fff !important;
				background: #5DB175 !important;
			}
		}
	}
  .leMeal_titlenew{
    padding-right: 8rpx;
  }
	.singleMeal_box {
		width: 748rpx;
		// border-radius: 20px;//取消间隔-1
		background: #FFF;
		// margin-bottom: 30rpx;//取消间隔-1
		padding: 0 28rpx 20rpx;
		position: relative;
		z-index: 3;

		&:first-child {
			// box-shadow: 0px -4px 10px 0px rgba(1, 33, 18, 0.4);
			margin-top: -30rpx;
			// position: relative;
			// z-index: 88;
		}

		.mitem {
			width: 222rpx; //330
			min-height: 364rpx; //406
			margin: 0 12rpx 20rpx 0;

			&:nth-child(3n) {
				margin: 0 0 20rpx 0;
			}
		}

		.zitem {
			margin: 0 30rpx 20rpx 0;
			max-width: 100%;

			&.gry {
				.text_marleft {
					color: #c0c0c0;
				}
			}
		}

		.list_img {
			border-radius: 16rpx;

			&.bg {
				background: #fafafa;
			}

			.img_style {
				// width: 170rpx;//330rpx
				height: 180rpx; //320rpx
				flex-shrink: 0;
				position: relative;
			}

			.img_wh {
				border-radius: 30rpx;
				width: 180rpx;
				height: 180rpx;
			}

			.act {
				.list_border {
					border: 1px solid #53A87F;
					background: rgba(228, 248, 228, 0.50);
				}

				.spctext {
					color: #53A87F;
				}
			}
		}


	}

	.specifications {
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 0 24rpx;
		height: 50rpx;
		flex-shrink: 0;
		border-radius: 10px 0px;
		background: rgba(0, 0, 0, 0.30);
		color: #FFF;
		font-size: 24rpx;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.singleMeal_box_bg {
		border-radius: 0;
		margin-bottom: 0;

		.list_border {
			border-radius: 110rpx;
			border: 1px solid rgba(153, 153, 153, 0.30);
			padding: 16rpx 24rpx;
			position: relative;

			.lock_icon_posi {
				position: absolute;
				right: 0;
				top: -15rpx;
			}

			.text_marleft {
				margin-left: 16rpx;
			}
		}

		.text_img {
			width: 40rpx;
			height: 40rpx;
			border-radius: 20rpx;

		}

		&:first-child {
			// border-radius: 20px 20px 0 0 !important;
			box-shadow: 0px -4px 10px 0px rgba(1, 33, 18, 0);
		}

		&:last-child {
			padding-bottom: 60rpx;
		}
	}

	.text48 {
		font-size: 48rpx;
	}

	.ms_test {
		width: 100vw;
		background-color: rgba(51, 51, 51, 0.50);
		z-index: 3;
		color: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.navBtn {
		@include centBox(152rpx, 56rpx, rgba(153, 153, 153, 0.5));
		border-radius: 56rpx;
		color: #fff;
	}

	.recodBox {
		width: calc(100vw - 60rpx);
		border-radius: 10rpx;
		// opacity: 0.3;
		// background: rgba(235, 239, 251, 0.3);
	}

	.setBox {
		border-radius: 10rpx 10rpx 0 0;
		// background: rgba(235, 239, 251, 0.3);
	}

	.textl60 {
		font-size: 52rpx;
	}

	.nvbf {
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 16rpx;
			width: 4rpx;
			height: 32rpx;
			background: $text-act;
		}
	}

	.mothbox {
		padding: 0 20rpx;

		.curMonth_style {
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}

		.yuan {
			display: inline-block;
			width: 16rpx;
			height: 16rpx;
			flex-shrink: 0;
			background-color: #B2FAB9;
			margin-right: 10rpx;
			border-radius: 50%;
		}

		.border_bootom {
			border-bottom: 1px solid rgba(0, 0, 0, 0.03);
			padding: 0 0 30rpx;
		}

		// position: absolute;
		// left: 30rpx;
		// top: 10rpx;
	}

	.mcalendbx {
		// position: absolute;
		// left: 0;
		// top: 86rpx;
		border-radius: 20rpx;
		width: 100%;
		// background: rgba(235, 239, 251, 0.3);
		z-index: 2;
		height: 0;
		overflow: hidden;
		margin-bottom: 20rpx;

		&.lg {
			&.show {
				height: 582rpx;
			}

			.mcdbox {
				height: 582rpx;
				z-index: 6;
			}
		}

		.mcdbox {
			height: 498rpx;
			border-radius: 20rpx;
			// border: 1px solid rgba(153, 153, 153, 0.1);

		}

		&.show {
			height: 500rpx;
			overflow: inherit;
			// transition: height 0.2s ease-out;
			// animation: anshow 0 ease-in-out 0.2s forwards;
			// animation: anshow 0,0.2s,1;
			// animation-fill-mode: forwards;
		}

		@keyframes anshow {
			from {
				overflow: hidden;
			}

			to {
				overflow: inherit;
			}
		}

		.mcitm {
			width: 14.28%;
			height: 84rpx;
			display: inline-block;
		}

		.mcsub {
			width: 60rpx;
			height: 60rpx;
			line-height: 61rpx;
			background-color: rgba(235, 239, 251, 0.50);
			color: #CFCFCF;
			border-radius: 50%;

			&.ngreen {
				// background: linear-gradient(138deg, #B8E4C0 14.11%, #83DD86 84.09%);
				background-color: #53A87F;
				color: #F8FFFB;
			}

			&.grey {
				background-color: #EAEAEA;
				color: #F8FFFB;
			}
		}
	}

	.cuIcon-round {
		color: #999;
	}

	.cuIcon-roundcheckfill {
		color: $base-color;
	}

	.centSec {
		width: 100vw;
		min-height: 300rpx;
		border-radius: 20rpx;
		background: $color-white;
		z-index: 4;
		margin-top: -10rpx;

		.cslist {
			padding: 10rpx 16rpx 0 16rpx;
		}

		.clitm {
			width: calc(33% - 12rpx);
			height: 362rpx;
			border-radius: 24rpx 24rpx 10rpx 10rpx;
			border: 1px solid #F7F7F7;
			background: $color-white;
			margin-left: 10rpx;
			// &:nth-child(2n) {
			// 	margin-right: 0;
			// 	margin-left: 2rpx;
			// }
		}

		.climgbx,
		.climg {
			width: 100%;
			height: 200rpx;
		}

		.climg {
			border-radius: 24rpx 24rpx 0px 0px;
		}

		.csbtnbx {
			min-height: 60rpx;
		}



		.csdian {
			padding: 0 6rpx;
		}
	}

	.cstip {

		&:before,
		&:after {
			content: '';
			display: inline-block;
			position: relative;
			width: 34rpx;
			height: 23rpx;
			border-radius: 23rpx;
			opacity: 0.5;
			background: linear-gradient(90deg, rgba(137, 184, 61, 0.03) 0%, rgba(44, 172, 88, 0.50) 100%);
			z-index: 1;
		}

		&:after {
			left: -18rpx;
			z-index: 2;
		}

		&.right {
			margin-left: 18rpx;

			&:before,
			&:after {
				background: linear-gradient(90deg, rgba(44, 172, 88, 0.50) 0%, rgba(137, 184, 61, 0.03) 100%);
			}
		}
	}

	.csline {
		line-height: 50rpx;

		// height: 5rpx;
		&:before {
			content: '';
			display: inline-block;
			width: 32rpx;
			height: 5rpx;
			border-radius: 5rpx;
			background: #333;
		}
	}

	.cstit {
		padding: 20rpx;
	}

	.bot_padbox {
		height: 356rpx;
	}

	//底部模块-s
	.meal_botbx {
		position: fixed;
		width: calc(100vw - 40rpx);
		height: 336rpx;
		left: 20rpx;
		bottom: 0;
		z-index: 98;
	}

	.bot_main {
		&.scemt {
			.bmtbox {
				padding-top: 20rpx;
			}

			.btitm {
				// background: #8D8D8D;
			}

			.btimg {
				border: none;
				background: #8D8D8D;
			}

			.btcont {
				background: #6A6A6A;
			}

			.bmbot {
				background: #8D8D8D !important;
			}

		}
	}

	.shuline {
		&::after {
			content: '';
			width: 3rpx;
			height: 130rpx;
			position: absolute;
			// @include baseab(3rpx,100rpx);
			opacity: 0.5;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(255, 255, 255, 0.46) 46.5%, rgba(0, 0, 0, 0.00) 88.58%);
			right: 150rpx;
			top: 11rpx; //80
			z-index: 2;
		}
	}

	.bot_scr {
		height: 130rpx;
		width: calc(100vw - 210rpx);



		.btitm {
			display: inline-block;
			margin: 16rpx 30rpx 0 0;

		}

		.btitm,
		.btimg {
			width: 92rpx;
			height: 92rpx;
		}

		.btimg {
			border-radius: 10rpx;
			border: 1px solid $base-color;
		}
    .hy{
      position: absolute;
      right: 0;
      bottom: 0rpx;
      z-index: 8;
      width: 36rpx;
      height: 40rpx;
      line-height: 37rpx;
      background-color: #F5A623;
      border-radius: 10rpx 0rpx 20rpx 0rpx;
      z-index: 10;
      .hs_s {
      	color: #fff;
      	font-size: 24rpx;
      	display: block;
      	padding-left: 6rpx;
      	padding-top: 4rpx;
      }
    }
		.btmsbx {
			// width: 100%;
			// position: absolute;
			// height: 30rpx;
			@include baseab(100%, 30rpx);
			left: 0;
			bottom: -10rpx;
			z-index: 100;
		}

		.btcont {
			min-width: 64rpx;
			height: 30rpx;
			line-height: 31rpx;
			border-radius: 30rpx;
			background: $base-color;

			&.kx {
				color: $base-color;
				border: 1px solid $base-color;
				background: #FFF;
			}
		}

		.bttip {
			@include baseab(28rpx, 28rpx);
			border-radius: 50%;
			background: #fff;
			top: -10rpx;
			right: -10rpx;
      z-index: 100;
		}
	}

	.fcon-a-close {
		font-size: 20rpx;
	}

	.tmlef {
		&::after {
			content: '';
			width: 3rpx;
			height: 100%;
			position: absolute;
			// @include baseab(3rpx,100rpx);
			opacity: 0.5;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(133, 133, 133, 0.46) 46.5%, rgba(0, 0, 0, 0.00) 88.58%);
			left: 0;
			top: 0;
			z-index: 2;
		}
	}

	.bmlef {
		width: 67%;
		height: 100%;
		margin: 0 20rpx 0 20rpx;
		display: flex;
		align-items: center;

		.total_moneys {
			color: #FFF;
			font-size: 60rpx;
			font-weight: 700;

			.moneys_front {
				font-size: 28rpx;
				font-weight: 700;
			}

		}

		.total_reduce {
			color: #FFF;
			font-size: 24rpx;
			font-weight: 400;
			text-decoration: line-through;
			margin: 30rpx 0 0 20rpx;
		}
	}

	.bot_main {
		width: 100%;
		height: 306rpx;

		.bmtop {
			height: 196rpx;
			background: #1D3E5F;
			border-radius: 40rpx 40rpx 0 0;
			padding: 10rpx 10rpx 0 10rpx;
		}

		.bmtbox {
			height: 100%;
			border-radius: 40rpx 40rpx 0 0;
			// border: 10rpx solid #040404;
			border-bottom: 0;
		}

		.bmbot {
			height: 110rpx;
			background: $base-color;
			border-radius: 0 0 40rpx 40rpx;
		}



		.bmyuan {
			font-size: 46rpx;
			width: 70rpx;
			height: 70rpx;
			line-height: 71rpx;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.2);
		}

		.bmsubbtn {
			@include centBox(202rpx, 66rpx);
			border-radius: 66rpx;
			color: $base-color;
		}
	}

	//底部模块-e

	//弹窗1-s
	.zm_itm {
		@include centBox(68rpx, 68rpx);
		border-radius: 50%;
		background: $base-color;
		margin: 20rpx 0 0 30rpx;

		&.kx {
			background: #fff;
			color: #999;
			border: 1px solid #999;
		}
	}

	.zm_slc {
		margin: 20rpx 40rpx 0 0;
		// margin-left: 0!important;
		// font-size: 24rpx;
		white-space: nowrap;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 306rpx;
		height: 90rpx;
		background: #F7F7F7;

		// box-sizing: border-box;
		// font-family: Microsoft YaHei, Helvetica Neue, Helvetica, sans-serif;
		&:nth-child(2n) {
			margin: 20rpx 0 0 0;
		}
	}

	.zm_half {
		width: 316rpx;
		font-size: 32rpx;
		text-align: center;
		height: 88rpx;
		line-height: 89rpx;
		// box-shadow: 0px 10px 40px rgba(76, 162, 123, 0.26);
		border-radius: 16rpx;
		cursor: pointer;
		background: #fff;
		color: #999;
		border: 1px solid #999;

		&.bg {
			color: #fff;
			background: $view-act;
		}
	}

	//弹窗1-e
	//弹窗2-s
	.pw_img {
		min-height: 300rpx;
	}

	.mimg {
		border-radius: 20rpx 20rpx 0 0;
		height: 300rpx;
	}

	.pw_litm {
		width: calc(100% - 60rpx);
		height: 90rpx;
		border-radius: 10rpx;
		background: #F7F7F7;

		&.kx {
			background: none;
			border: 1px solid #53A87F;
		}
	}

	//弹窗2-e
	// 日历扩展弹窗-s
	.calenSubFixed {
		position: absolute;
		left: 15rpx; //50
		width: 658rpx;
		// min-height: 200rpx;
		height: 0;

		z-index: 106;
		overflow: hidden;

		// opacity: 0;
		&.show {
			// overflow: inherit;
			height: 692rpx; //暂
			// opacity: 1;
			transition: height 0.2s ease-out;

		}

		.csfmain {
			margin-top: 20rpx;
			border-radius: 10px;
			background: #80D2A7;
			padding: 10rpx 30rpx 30rpx 30rpx;
		}

		.jtbox {
			position: absolute;
			width: 0;
			height: 0;
			align-self: center;
			position: absolute;
			border: 30rpx solid transparent;
			top: -16rpx;
			left: 50%;
			margin-left: -20rpx;
			border-top: none;
			border-bottom-color: #80D2A7;
			// border-bottom-height: 20rpx;
		}
	}

	.clm_cont {
		padding: 16rpx 30rpx 10rpx 30rpx;
		border-radius: 5px;
		background: linear-gradient(98deg, rgba(22, 129, 67, 0.20) 2.4%, rgba(22, 129, 67, 0.20) 95.9%, rgba(22, 129, 67, 0.20) 95.91%);

		.cpdmin {
			padding-bottom: 15rpx;
		}
	}

	.lock_icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #53A87F;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.add_menu {
		width: 100rpx;
		height: 100rpx;
		border: 1rpx dashed #FFF;
		border-radius: 10rpx;
		margin: 17rpx 0 0 34rpx;
		text-align: center;
		padding: 10rpx 0 10rpx 0;
		color: rgba(255, 255, 255, 0.70);

		.menu_add_text {
			color: rgba(255, 255, 255, 0.70);
			font-size: 20rpx;
			font-weight: 400;
			display: block;
			margin-top: 14rpx;
		}
	}

	.mores {
		color: #999;
		font-family: "Microsoft YaHei UI";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.mores_icons {
		font-size: 26rpx;
		color: #666;
		margin-left: 5rpx;
	}

	.price_text {
		color: #FC4C40;
		font-size: 32rpx;
		font-weight: 400;

		.price_text_y {
			font-size: 20rpx;
		}
	}

	.dragMain {
		// box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.2);
		border-radius: 40rpx;
		width: 156rpx; //120
		height: 156rpx; //120
		transition: width 0.2s ease-out;
		overflow: hidden;

		&.show {
			width: 644rpx;
			// height: 268rpx;
			height: 160rpx;

			.expend_box {
				height: 268rpx;
				background: #EBEFFB;

				// border-radius: 50%;
				.ex_top {
					width: 120rpx;
					height: 120rpx;
					border: none;
				}
			}
		}
	}

	.expend_box {
		padding: 20rpx 15rpx 20rpx 15rpx;
		width: 644rpx;
		// height:268rpx;
		// padding:20rpx 15rpx 20rpx 15rpx;
		background: none;
		// width:120rpx;
		// height: 120rpx;
		border-radius: 40rpx;
		// box-shadow: 0px 0px 13.4px 0px rgba(0, 0, 0, 0.20);
		// display: flex;
		// justify-content: space-between;
		position: relative;
		// flex-wrap: wrap;


		// &.show{
		// 	width: 644rpx;
		// 	opacity: 1;
		// 	padding:20rpx 15rpx 20rpx 15rpx;
		// 	height:268rpx;
		// 	.ex_top{
		// 		width:120rpx;
		// 		height:120rpx;
		// 		border: none;
		// 	}
		// }
		.exitem {
			width: 154rpx;
		}

		.ex_top {
			width: 112rpx;
			height: 112rpx;
			border-radius: 50%;
			background: #FF9307;
			color: #fff;
			border: 8rpx solid #fff;
			box-shadow: 0px 2px 10rpx 0px rgba(0, 0, 0, 0.3);
		}

		.an_icons {
			position: absolute;
			left: 4rpx;
			top: 37rpx;
			width: 38rpx;
			height: 38rpx;
			border-radius: 80rpx;
			background: rgba(255, 255, 255, 0.90);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.fn_toCal {
			font-family: "Microsoft YaHei UI";
			font-size: 32rpx;
			font-weight: 700;
		}

		.martmin {
			padding-top: 3rpx;
		}

		.fn_unit {
			font-family: "Microsoft YaHei UI";
			font-size: 20rpx;
			font-weight: 400;
			line-height: 1;
		}


		.oth_box {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			font-family: "Microsoft YaHei UI";
			text-align: center;
			padding-top: 10rpx;
			position: relative;
			background-size: 130% 130%;
			background-position-x: -20rpx;
			background-position-y: -20rpx;

			.list_name {
				color: #333;
				font-size: 24rpx;
				font-weight: 400;
				margin-top: 12rpx;
				z-index: 1;
				line-height: 1;
			}

			.list_value {
				color: #333;
				font-size: 40rpx;
				font-weight: 700;
				z-index: 1;
				margin-top: 9rpx;
				line-height: 1;
			}
		}

		.change_box {
			min-width: 110rpx;
			height: 110rpx;
			padding: 10rpx 0;
			text-align: center;

			.ch_val {
				color: #333;
				font-family: "Microsoft YaHei UI";
				font-size: 40rpx;
				font-weight: 400;
			}

			.ch_name {
				color: #999;
				font-family: "Microsoft YaHei UI";
				font-size: 24rpx;
				font-weight: 400;
				margin-top: 10rpx;
			}
		}
	}

	.lkbox {
		width: 60rpx;
		height: 60rpx;
	}

	.lock_icon_Vimg {
		// position: absolute;
		// left: 6rpx;
		// top: 6rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background-color: #53A87F;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
	.goods_removeds{
		width: 100%;
		height:40rpx;
		position: absolute;
		bottom:0;
		left:0;
		line-height: 40rpx;
		border-radius: 0px 0px 26rpx 26rpx;
		background: rgba(0, 0, 0, 0.50);
		color: #fff;
		font-size: 28rpx;
	}
	.goods_removeds_text{
		width: 100%;
		height:100%;
		position: absolute;
		bottom:0;
		left:0;
		border-radius: 92px;
		background: rgba(0, 0, 0, 0.50);
		color: #fff;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>